<template>
    <div id="UserCoupon">

        <el-container>
            <!--  页头 -->
            <el-header style="background-color: #F3F3F3">
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>优惠券列表</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>

            <!-- 搜索区 -->
            <el-main  style="background-color: #FFFFFF">

                <div style="text-indent: 5px;background-color: #F3F3F3">
                    <i class="el-icon-search"></i> 筛选查询
                </div>

                <div style="background-color: #FFFFFF;">
                    <span style="margin-left: 80px">用户账号：</span><el-input v-model="UserAccount" size="medium " style="width: 180px" placeholder="用户账号"></el-input>

                    <span style="margin-left: 80px">用户昵称：</span><el-input v-model="UserName" size="medium " style="width: 180px" placeholder="用户昵称"></el-input>

                    <el-button style="margin-left: 105px" @click="Search()" size="medium" ><i class="el-icon-search"></i> 查询结果</el-button>
                </div>

            </el-main>

            <!-- 数据表 -->
            <el-footer style="line-height: 60px;text-indent: 5px">
                <i class="el-icon-s-order"></i> 数据列表

                <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column align="center"  type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="userId" label="用户ID"></el-table-column>
                    <el-table-column align="center" prop="account" label="用户账号"></el-table-column>
                    <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                    <el-table-column align="center" prop="ysy" label="已使用"></el-table-column>
                    <el-table-column align="center" prop="wsy" label="未使用"></el-table-column>
                    <el-table-column align="center" prop="ygq" label="已过期"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">

                            <router-link :to="{name:'UserId',params:{UserId:scope.row.userId}}"><el-button type="text" size="small">
                                查看明细
                            </el-button></router-link>
                                &nbsp;
                            <el-button @click.native.prevent="giveCoupon(scope.row)" type="text" size="small">
                                赠送优惠券
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="paging">
                    <el-pagination align='center'
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,8,12]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>

            </el-footer>

            <!-- 赠送优惠券 页面区域 -->
            <el-dialog title="赠送优惠券" destroy-on-close :visible.sync="dialogFormVisible">

                <div style="margin-bottom: 20px">
                    <el-input v-model="GiveName" style="width: 180px" placeholder="优惠券名称"></el-input><el-button icon="el-icon-search" @click="GiveSearch"></el-button>
                </div>
                <!--表-->
                <el-table border :data="GiveTableData.slice((GiveCurrentPage-1)*GivePageSize,GiveCurrentPage*GivePageSize)" @selection-change="selectionChange" style="width: 100%">
                    <el-table-column align="center" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="couponName" label="优惠券名称"></el-table-column>

                    <el-table-column align="center" prop="couponPrice" label="面额">
                        <template slot-scope="scope">
                            ¥ {{scope.row.couponPrice}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="used" label="剩余张数">
                        <template slot-scope="scope">
                            {{scope.row.issueQuantity - scope.row.used}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="type" label="使用条件">
                        <template slot-scope="scope">
                            <span v-if="scope.row.grant == 2">商品</span>
                            <span v-if="scope.row.grant == 3">视频</span>
                            <span v-if="scope.row.grant == 4">无限制</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="startDate" label="有效期">
                        <template slot-scope="scope">
                            {{scope.row.startDate}} 至 {{scope.row.endDate}}
                        </template>
                    </el-table-column>

                </el-table>

                <div class="paging">
                    <el-pagination align='center'
                                   @size-change="GiveHandleSizeChange"
                                   @current-change="GiveHandleCurrentChange"
                                   :current-page="GiveCurrentPage"
                                   :page-sizes="[1,5,8,12]"
                                   :page-size="GivePageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="GiveTableData.length">
                    </el-pagination>
                </div>

                <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="AddUserCoupon()">确 定</el-button>
                </div>

            </el-dialog>

        </el-container>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
        return{
            UserName:null,  //模糊查昵称
            UserAccount:null,   //模糊查账号
            tableData:[],   //用户持有优惠券数据表
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 5, // 每页的数据条数
            dialogFormVisible: false,
            //赠送优惠券
            GiveUId:null,    //用户ID,用来赠送
            GiveCId:[],       //优惠券ID，数组存储多个
            GiveTableData:[],
            GiveCurrentPage: 1, // 当前页码
            GivePageSize: 5, // 每页的数据条数
            GiveTotal: 0, // 总条数
            GiveName:null,
        }
    },
    created() {
        //用户持有优惠券:请求表数据
        this.$http.get("/UserCoupon/getTableData").then(res => {
            this.tableData = res.data;
            this.total = res.data.length;
        })
        //赠送优惠券:请求表数据
        this.$http.get("/Coupon/tableData").then(res => {
            this.GiveTableData = res.data
            this.GiveTotal = res.data.length
        })

    },
    methods: {
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //查询
        Search(){
            this.currentPage = 1;
            this.$http.get("/UserCoupon/SearchTable",{params:{'UserName':this.UserName,'UserAccount':this.UserAccount}}).then(res => {
                this.tableData = res.data
                this.total = res.data.length
            })
        },
        //赠送优惠券
        giveCoupon(row){
            this.dialogFormVisible = true
            this.GiveUId = row.userId;
        },
        //用户持有优惠券: 每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //用户持有优惠券: 当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        //赠送优惠券: 每页条数改变时触发 选择一页显示多少行
        GiveHandleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.GiveCurrentPage = 1;
            this.GivePageSize = val;
        },
        //赠送优惠券: 当前页改变时触发 跳转其他页
        GiveHandleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.GiveCurrentPage = val;
        },
        //赠送优惠券: 优惠券查询
        GiveSearch(){
            this.currentPage = 1;
            this.$http.get("/Coupon/tableData",{params:{cpName:this.GiveName}}).then(res => {
                this.GiveTableData = res.data
                this.GiveTotal = res.data.length
            })
        },
        //赠送优惠券: 赠送
        AddUserCoupon(){
            let url = "/UserCoupon/AddUserCoupon";
            var data = new URLSearchParams();
            data.append('cId', this.GiveCId);
            data.append('uId', this.GiveUId);

            if (this.GiveCId == 0){
                this.$message("添加了个空气");
                this.dialogFormVisible = false
            } else {
                this.$http.post(url, data, {
                    headers: {
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res =>{
                    this.dialogFormVisible = false
                    let status = res.data.status;
                    if (status == 200) {
                        this.$message(res.data.msg);
                    }else {
                        this.$message(res.data.msg);
                    }
                })
                //刷新
                this.reload();
            }


        },
        //赠送优惠券：复选框单击事件
        selectionChange(val){
            //重置一下
            this.GiveCId = [];
            //添加优惠券ID
            for (let i = 0; i < val.length; i++) {
                this.GiveCId.push(val[i].couponId)
            }
            // console.log(this.GiveCId)
        }
    }
}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 130px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
